<template>
	<div class="top">
		<div class="content">
			<div class="left" @click="goHome">
				<img src="../../assets/images/logo.png" alt="" />
				<p class="blue">尚医通 预约挂号统一平台</p>
			</div>
			<div class="right">
				<span class="help d">帮助中心</span>
				<span class="login d" @click="login" v-if="!userStore.userInfo.name">登录/注册</span>
				<el-dropdown v-else>
					<span class="el-dropdown-link">
						{{ userStore.userInfo.name }}
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="go('/user/certification')">实名认证</el-dropdown-item>
							<el-dropdown-item @click="go('/user/order')">挂号订单</el-dropdown-item>
							<el-dropdown-item @click="go('/user/patient')">就诊人管理</el-dropdown-item>
							<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/store/user';
import { ArrowDown } from '@element-plus/icons-vue';

const userStore = useUserStore();

const route = useRoute();
const router = useRouter();

// 跳转首页
function goHome() {
	router.push({
		path: '/',
	});
}

// 登录
function login() {
	userStore.visible = true;
}

// 退出登录
function logout() {
	userStore.logout();

	if (route.meta.requiredLogin) goHome();
}

function go(path: string) {
	router.push({
		path,
	});
}
</script>

<style scoped lang="scss">
.top {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 70px;
	background-color: #fff;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
	.content {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			img {
				width: 50px;
				height: 50px;
				margin-right: 10px;
			}
			p {
				font-size: 20px;
			}
		}
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			.help {
				margin-right: 10px;
			}
			span.d {
				color: #888;
				font-size: 14px;
			}
			span.d:hover {
				color: var(--text-color-blue);
				cursor: pointer;
			}
			:deep(.el-dropdown),
			:deep(.el-dropdown > *) {
				outline: none;
			}
		}
	}
}
</style>
